<template>
  <view
    class="status-show"
    :class="[
      `status-${statusType}`,
      `variant-${variant}`,
      `size-${size}`,
      { clickable: clickable },
    ]"
    @tap="handleClick"
  >
    <wd-icon v-if="showIcon && iconName" :name="iconName" class="status-icon" />
    <text class="status-text">{{ statusName }}</text>
    <view v-if="showDot" class="status-dot" />
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { OrderReviewStatus, getStatusType } from '@/enums/rescue/OrderReviewStatus'

interface Props {
  /** 状态代码 */
  status: string
  /** 显示变体 */
  variant?: 'filled' | 'outlined' | 'ghost' | 'minimal'
  /** 尺寸 */
  size?: 'small' | 'medium' | 'large'
  /** 是否显示图标 */
  showIcon?: boolean
  /** 是否显示状态点 */
  showDot?: boolean
  /** 是否可点击 */
  clickable?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'filled',
  size: 'medium',
  showIcon: false,
  showDot: false,
  clickable: false,
})

const emit = defineEmits<{
  (e: 'click', status: string): void
}>()

// 状态名称
const statusName = computed(() => {
  const statusItem = Object.values(OrderReviewStatus).find((item) => item.code === props.status)
  return statusItem?.name || props.status
})

// 状态类型
const statusType = computed(() => {
  const statusItem = Object.values(OrderReviewStatus).find((item) => item.code === props.status)
  return getStatusType(statusItem || OrderReviewStatus.None)
})

// 图标名称
const iconName = computed(() => {
  if (!props.showIcon) return ''

  const iconMap: Record<string, string> = {
    success: 'check-circle',
    warning: 'clock-circle',
    danger: 'close-circle',
    info: 'info-circle',
    default: 'tag',
  }

  return iconMap[statusType.value] || iconMap.default
})

// 处理点击
function handleClick() {
  if (props.clickable) {
    emit('click', props.status)
  }
}

// 定义组件名称
defineOptions({
  name: 'OrderReviewStatusShow',
})
</script>

<style lang="scss" scoped>
// Apple设计系统颜色
$system-blue: #007aff;
$system-green: #34c759;
$system-orange: #ff9500;
$system-red: #ff3b30;
$system-gray: #8e8e93;

$label-primary: #000000;
$label-secondary: rgba(60, 60, 67, 0.6);

.status-show {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6rpx;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  border-radius: 12rpx;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  // 尺寸变化
  &.size-small {
    padding: 4rpx 12rpx;
    font-size: 20rpx;
    min-height: 32rpx;
    gap: 4rpx;

    .status-icon {
      font-size: 16rpx;
    }

    .status-dot {
      width: 8rpx;
      height: 8rpx;
    }
  }

  &.size-medium {
    padding: 8rpx 16rpx;
    font-size: 24rpx;
    min-height: 40rpx;
    gap: 6rpx;

    .status-icon {
      font-size: 20rpx;
    }

    .status-dot {
      width: 10rpx;
      height: 10rpx;
    }
  }

  &.size-large {
    padding: 12rpx 20rpx;
    font-size: 28rpx;
    min-height: 48rpx;
    gap: 8rpx;

    .status-icon {
      font-size: 24rpx;
    }

    .status-dot {
      width: 12rpx;
      height: 12rpx;
    }
  }

  // 可点击状态
  &.clickable {
    cursor: pointer;

    &:hover {
      transform: translateY(-1rpx);
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
    }

    &:active {
      transform: translateY(0) scale(0.95);
    }
  }

  .status-text {
    font-weight: 600;
    letter-spacing: -0.2px;
  }

  .status-dot {
    border-radius: 50%;
    flex-shrink: 0;
  }

  // 状态主题
  &.status-success {
    &.variant-filled {
      background: $system-green;
      color: white;
      border: 1px solid $system-green;

      .status-dot {
        background: rgba(255, 255, 255, 0.8);
      }
    }

    &.variant-ghost {
      background: rgba(52, 199, 89, 0.15);
      color: $system-green;
      border: 1px solid rgba(52, 199, 89, 0.3);

      .status-dot {
        background: $system-green;
      }
    }
  }

  &.status-warning {
    &.variant-filled {
      background: $system-orange;
      color: white;
      border: 1px solid $system-orange;

      .status-dot {
        background: rgba(255, 255, 255, 0.8);
      }
    }

    &.variant-ghost {
      background: rgba(255, 149, 0, 0.15);
      color: $system-orange;
      border: 1px solid rgba(255, 149, 0, 0.3);

      .status-dot {
        background: $system-orange;
      }
    }
  }

  &.status-danger {
    &.variant-filled {
      background: $system-red;
      color: white;
      border: 1px solid $system-red;

      .status-dot {
        background: rgba(255, 255, 255, 0.8);
      }
    }

    &.variant-ghost {
      background: rgba(255, 59, 48, 0.15);
      color: $system-red;
      border: 1px solid rgba(255, 59, 48, 0.3);

      .status-dot {
        background: $system-red;
      }
    }
  }

  &.status-info {
    &.variant-filled {
      background: $system-blue;
      color: white;
      border: 1px solid $system-blue;

      .status-dot {
        background: rgba(255, 255, 255, 0.8);
      }
    }

    &.variant-ghost {
      background: rgba(0, 122, 255, 0.15);
      color: $system-blue;
      border: 1px solid rgba(0, 122, 255, 0.3);

      .status-dot {
        background: $system-blue;
      }
    }
  }

  &.status-default {
    &.variant-filled {
      background: $system-gray;
      color: white;
      border: 1px solid $system-gray;

      .status-dot {
        background: rgba(255, 255, 255, 0.8);
      }
    }

    &.variant-ghost {
      background: rgba(142, 142, 147, 0.15);
      color: $system-gray;
      border: 1px solid rgba(142, 142, 147, 0.3);

      .status-dot {
        background: $system-gray;
      }
    }
  }
}
</style>
